<template>
    <el-row class="role-item">
        <el-col :span="4">
            <div class="item-title">{{ $t('system.permission.orgs.title') }}</div>
        </el-col>
        <el-col :span="16">
            <component-page-loading :status="orgListStatus" v-if="['loading', 'error'].indexOf(orgListStatus) >= 0" @reload="getOrgs"></component-page-loading>
            <component-page-loading status="nodata" v-else-if="!orgList.length"></component-page-loading>
            <div class="org-tree-container" v-else>
                <el-tree :data="orgList" :props="{children: 'children',label: 'name'}"></el-tree>
            </div>
        </el-col>
        <el-col :span="4" class="text-right" v-if="orgListStatus == 'dle'">
            <a class="role-item-option" href="javascript:;" @click="dialogVisible = true">{{ $t('action.modify') }}</a>
        </el-col>
        <el-dialog :title="$t('system.permission.orgs.title')" width="700px" :visible.sync="dialogVisible">
            <div class="p-2" v-if="!dataList.length || dataListLoading!='dle'">
                <component-page-loading :status="dataListLoading" @reload="getDataList"></component-page-loading>
            </div>
            <vue-simplebar v-else-if="dialogVisible">
                <el-alert class="mb-2" type="warning" :title="$t('system.permission.orgs.warning')"></el-alert>
                <el-tree ref="treeOrg"
                         :data="dataList"
                         :props="{children: 'children',label: 'name'}"
                         show-checkbox
                         check-strictly
                         node-key="id"
                         :default-checked-keys="(orgs==null || orgs.ids==null) ? [] : orgs.ids">
                </el-tree>
            </vue-simplebar>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('action.cancel') }}</el-button>
                <el-button type="primary" @click="onSubmit">{{ $t('action.confirm') }}</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
export default {
    name: "PermissionOrg",
    props: ['tree'],
    data() {
        return {
            orgListStatus: 'dle',
            orgList: [],
            orgs: null,
            dialogVisible: false,
            dataListLoading: 'dle',
            dataList: [],
        }
    },
    watch: {
        tree: {
            deep: true,
            immediate: true,
            handler(n, o) {
                // 获取授权平台
                this.getOrgs();
            }
        },
        dialogVisible: function (n, o) {
            if (n) {
                // 获取菜单数据
                this.getDataList();
            } else {
                // 初始化菜单数据
                this.dataList = [];
                this.dataListLoading = 'dle';
            }
        }
    },
    methods: {
        // 获取授权平台
        getOrgs() {
            this.orgListStatus = 'loading';
            axios.get('/system/permission/tree-org/getOrgs', {
                params: {
                    tree_id: this.tree.id
                }
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.orgList = response.data.resp_data.orgList;
                    this.orgs = response.data.resp_data.orgs;
                    this.orgListStatus = 'dle';
                } else {
                    this.orgListStatus = 'error';
                }
            })
        },
        getDataList() {
            this.dataListLoading = 'loading';
            axios.get('/system/permission/tree-org/getOrgList', {
                params: {
                    tree_id: this.tree.isParentPermission ? this.tree.parent_id : this.tree.id
                }
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataList = response.data.resp_data;
                    this.dataListLoading = !this.dataList.length ? 'nodata' : 'dle';
                } else {
                    this.dataListLoading = 'error';
                }
            })
        },
        onSubmit() {
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/system/permission/tree-org/update', {
                tree_id: this.tree.id,
                orgs: {
                    ids: this.$refs.treeOrg.getCheckedKeys(),
                }
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    this.dialogVisible = false;
                    // 同步数据
                    this.orgList = response.data.resp_data.orgList;
                    this.orgs = response.data.resp_data.orgs;
                } else {
                    this.$message({
                        type: 'error',
                        message: this.$t('messages.failed', {status: this.$t('action.save')}),
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding-top: 15px;
    padding-bottom: 15px;
    height: 440px;
}

.org-tree-container {
    border: 1px solid $boder-color-fourth;
    padding: 6px 0;
}
</style>
